<script setup>
import { ref, onMounted } from 'vue'
import { listHomeData } from '/src/api/data.js'
import { tr } from 'element-plus/es/locales.mjs'
const option = ref({})
onMounted(() => {
  function getData() {
    const airTemp = [40, 60, 80, 140, 100]
    const airHumidity = [20, 40, 60, 80, 100]
    const pressure = [110, 170, 70, 130, 140]
    option.value = {
      tooltip: {
        trigger: 'axis',
        backgroundColor: '#0A1326',
        borderColor: '#535b69',
        borderRadius: 8,
        borderWidth: 2,
        padding: [5, 10],
        textStyle: {
          color: '#fff',
        },
      },
      legend: {
        icon: 'circle',
        itemWidth: 8,
        itemHeight: 8,
        itemGap: 10,
        data: ['空气温度', '空气湿度', '大气压'],
        textStyle: {
          fontSize: 14,
          color: '#DADBDE',
        },
      },
      grid: {
        top: 30,
        right: 0,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: true, //坐标轴两边是否留白
          axisLine: {
            //坐标轴线
            show: true,
            lineStyle: {
              color: '#515151',
            },
          },
          axisTick: {
            //坐标轴刻度线
            show: false,
          },
          axisLabel: {
            // show: true,
            // rotate: 10,
            margin: 0,
            color: '#D9D9D9',
          },
          data: ['1月', '2月', '3月', '4月', '5月'],
          offset: 10,
        },
      ],
      yAxis: [
        {
          type: 'value',
          axisLine: {
            //坐标轴线
            show: false,
            lineStyle: {
              color: '#fff',
            },
          },
          interval: 50,
          lineStyle: {
            type: 'dashed',
          },
          splitLine: {
            //坐标轴分割线
            lineStyle: {
              type: 'dashed',
              color: '#2b3646',
            },
          },
        },
      ],
      series: [
        {
          name: '空气温度',
          type: 'line',

          showSymbol: true,
          symbolSize: 8,
          data: airTemp,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#FAF00B55', // 顶部颜色
                },
                {
                  offset: 1,
                  color: 'rgba(0,224,255,0)', // 底部透明
                },
              ],
            },
          },
          itemStyle: {
            color: '#FAF00B',
          },
        },
        {
          name: '空气湿度',
          type: 'line',
          showSymbol: true,
          symbolSize: 8,
          data: airHumidity,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#30F3FF55', // 顶部颜色
                },
                {
                  offset: 1,
                  color: 'rgba(255,187,21,0)', // 底部透明
                },
              ],
            },
          },
          itemStyle: {
            color: '#30F3FF',
          },
        },
        {
          name: '大气压',
          type: 'line',
          showSymbol: true,
          symbolSize: 8,
          data: pressure,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#1396FD55', // 顶部颜色
                },
                {
                  offset: 1,
                  color: 'rgba(48,255,123,0)', // 底部透明
                },
              ],
            },
          },
          itemStyle: {
            color: '#1396FD',
          },
        },
      ],
    }
  }
  getData()
  setInterval(
    () => {
      getData()
    },
    import.meta.env.VITE_APP_INTERVAL,
  )
})
</script>
<template>
  <div class="index-2">
    <div class="left">
      <img class="img" src="@/assets/images/plant/right-top/image.png" alt="" />
      <div class="flex">
        <div class="title">序列号：</div>
        <div class="value">1630001556880768</div>
      </div>
      <div class="flex">
        <div class="title">经度：</div>
        <div class="value">120.041119</div>
      </div>
      <div class="flex">
        <div class="title">纬度：</div>
        <div class="value">30.169275</div>
      </div>
    </div>
    <div class="right">
      <div class="date">
        <div class="time">空气</div>
        <div class="time">光照</div>
        <div class="time">降雨</div>
      </div>
      <div class="top">
        <div class="item">
          <div class="icon"><img src="@/assets/images/plant/right-top/icon.png" alt="" /></div>
          <div>
            <div class="name">负氧离子</div>
            <div class="number">1000个/cm²</div>
          </div>
        </div>
        <div>
          <div class="header">
            <img class="sb" src="@/assets/images/plant/right-top/icon-1.png" alt="" />
            <div class="name">空气负氧离子含量分级</div>
          </div>
          <div class="content">
            <div class="level">>2000非常清新</div>
            <div class="level">1500-2000清新</div>
            <div class="level">1000-1500较清新</div>
          </div>
        </div>
      </div>
      <div class="date">
        <div class="time">日</div>
        <div class="time">周</div>
        <div class="time">月</div>
        <div class="time">年</div>
      </div>
      <div class="chart">
        <Echarts :option="option" />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.index-1,
.index-2 {
  display: flex;
  align-items: center;
  gap: 16px;
  .left {
    padding: 16px;
    width: 320px;
    height: 404px;
    background: url('/src/assets/images/plant/right-top/kuang.png');
    background-size: 100% 100%;
    .img {
      width: 288px;
      height: 216px;
      border-radius: 8px;
      margin-bottom: 16px;
    }
    .flex {
      display: flex;
      margin-bottom: 12px;
    }
    .title {
      font-family: PingFang SC;
      font-weight: 400;
      font-style: Regular;
      font-size: 14px;
      color: #00e0ff;
    }
    .value {
      font-family: PingFang SC;
      font-weight: 400;
      font-style: Regular;
      font-size: 14px;
      color: #ffffff;
    }
  }
  .right {
    .top {
      display: flex;
      align-items: center;
      width: 480px;
      height: 56px;
      background: url('@/assets/images/plant/right-top/top.png');
      margin-bottom: 10px;
    }
    .header {
      display: flex;
      align-items: center;
      margin-top: -5px;
    }
    .content {
      display: flex;
      align-items: center;
      gap: 20px;
      .level {
        margin-top: 5px;
        font-family: PingFang SC;
        font-weight: 400;
        font-style: Regular;
        font-size: 12px;
        color: #ccf0ff;
      }
    }
    .sb {
      width: 32px;
      height: 17px;
      object-fit: none;
    }
    .item {
      display: flex;
      .icon {
        width: 64px;
        height: 44px;
      }
      .number {
        width: 80px;
        font-family: PingFang SC;
        font-weight: 500;
        font-style: Medium;
        font-size: 12px;
        color: #00e0ff;
        margin-top: 5px;
      }
    }
    .bottom {
      width: 480px;
      height: 302px;
      background: url('@/assets/images/plant/right-top/bottom.png');
    }
  }
  .date {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 5px;
    .time {
      cursor: pointer;
      width: 56px;
      height: 24px;
      background: url('/src/assets/images/home/center-top/item.png') no-repeat;
      background-size: 100% 100%;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 14px;
      text-align: center;
      line-height: 24px;
      span {
        background: linear-gradient(180deg, #e4faff 44.96%, #a2ddff 85.6%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        display: inline-block;
      }
      &.active {
        background: url('/src/assets/images/home/center-top/item-active.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .chart {
    width: 480px;
    height: 302px;
    background: url('@/assets/images/plant/right-top/line.png') no-repeat center center;
    background-size: 100% 100%;
  }
}
</style>
